import { reqGetHospitalShow } from "@/api/hospital/hospitalList";
import { HospitalShowResponse } from "@/api/hospital/model/hospitalListType";
import { Badge, Button, Card, Descriptions } from "antd";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

export default function HospitalShow() {
  //通过 useParams 获取 params 参数
  let {id} = useParams();
  //声明状态
  let [hospitalShow, setHospitalShow] = useState<HospitalShowResponse>()

  useEffect(() => {
    //发送请求
    let getHospitalInfo = async () => {
      //获取医院的数据
      let result = await reqGetHospitalShow(id as string);
      //渲染数据
      setHospitalShow(result);
    }

    getHospitalInfo();
  }, [])

  let navigate = useNavigate();

  return (
    <Card>
      <Descriptions title="基本信息" bordered>
        <Descriptions.Item label="医院名称">
          {hospitalShow?.hospital.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo" span={2}>
          <img width="50" src={hospitalShow?.hospital.logoData ? "data:image/png;base64," + hospitalShow?.hospital.logoData : ''} alt="" />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {hospitalShow?.hospital.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址" span={2}>
          {hospitalShow?.hospital.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={3}>
          {hospitalShow?.hospital.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={3}>
          {hospitalShow?.hospital.intro}
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      <Descriptions title="预约规则信息" bordered>
        <Descriptions.Item label="预约周期">
          {hospitalShow?.bookingRule.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间" span={2}>
          {hospitalShow?.bookingRule.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hospitalShow?.bookingRule.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间" span={2}>
          {hospitalShow?.bookingRule.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={3}>
          {hospitalShow?.bookingRule.rule.map((item, index) => {
            return <p key={index}>{item}</p>
          })}
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      <Button onClick={() => {
        navigate('/syt/hospital/hospitalList')
      }}>返回</Button>

    </Card>
  );
}
